<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>涛宝商城</title>
<link rel="stylesheet" type="text/css" th:href="@{appstyle/css/style.css}" />
<link rel="stylesheet" type="text/css" th:href="@{appstyle/css/core.css}" />
<link rel="stylesheet" type="text/css" th:href="@{appstyle/css/mdui.css}" />
<script th:src="@{appstyle/js/jquery-3.3.1.js}" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" th:src="@{appstyle/js/mdui.js}"></script>
</head>
<body>
	<div id="header">
		<p class="p1">涛宝商城,只有想不到,没有买不到!!!</p>
	</div>
	<div id="header_1">
		<div class="login">
			<div class="login_1">
				<span class="span"> <a href="Land.html"
					th:if="${session.currentUser==null}">登录</a>
					<div class="mdui-container"
						style="display: inline-block; position: absolute; top: -5px"
						th:if="${session.currentUser!=null}">
						<div class="mdui-chip">
							<img class="mdui-chip-icon"
								th:src="@{${session?.currentUser?.headpic}}" /> <span
								class="mdui-chip-title"
								th:text="${session?.currentUser?.username}"></span> <span
								class="mdui-chip-title"><i
								class="mdui-icon material-icons"
								mdui-tooltip="{content: '安全退出'}" onclick="clickLogout()">&#xe5cd;</i></span>
						</div>
					</div> <a href="register.html" th:if="${session.currentUser==null}">注册</a>
				</span>
				<ul class="ul1">
					<li class="li1"><a href="Shopping_Cart.html" class="a1">购物车(<span
							class="number">0</span>)
					</a></li>
					<li class="li1"><a href="orderMsg.html" class="a1">我的订单</a></li>
					<li class="li1"><a href="userMsg.html" class="a1">我的涛宝</a></li>
					<li class="li1"><a href="taobaostoreMsg.html" class="a1">关于涛宝</a></li>
				</ul>
			</div>
		</div>
	</div>
	<script type="text/javascript">
		clickLogout = function() {
			$.ajax({
				url : "user/logout.do",
				Type : "post",
				dataType : "json",
				success : function(data) {
					mdui.snackbar({
					    message: '成功安全退出!',
					    position: 'top',
					    timeout:300,
					    onClosed:function(){
					    	location.reload();
					    }
				   });
				}
			})
		}
	</script>
	<div id="listBody">
		<div id="body">
			<!-- logo直接使用文字替代 -->
			<a class="logo" href="index.html">涛宝商城</a>
			<div id="body-1">
				<input id="serach_Input" class="textinput" type="text" placeholder=请输入商品名称 /> <input id="serach_Btn" type="button" class="button1" value="搜索	" />
			</div>
			<script type="text/javascript">
			$("#serach_Btn").click(function(){
				location.href="product/toSerachPage.do?keyword="+$("#serach_Input").val();
			})
			</script>
			<!-- 商品分类导航栏 -->
			<div id="daohanglan">
				<div id="daohanglan_1">
					<ul class="ul3">
						<li class="li2"><a class="a2">手机</a> <a class="a2">数码</a></li>
						<li class="li2"><a class="a2">电脑</a> <a class="a2">办公配件</a></li>
						<li class="li2"><a class="a2">电视</a> <a class="a2">空调</a> <a
							class="a2">冰箱</a> <a class="a2">洗衣机</a></li>
						<li class="li2"><a class="a2">厨卫家电</a> <a class="a2">小家电</a>
						</li>
						<li class="li2"><a class="a2">家居</a> <a class="a2">家具</a> <a
							class="a2">家装</a></li>
						<li class="li2"><a class="a2">个护化妆</a> <a class="a2">清洁</a> <a
							class="a2">纸品</a></li>
						<li class="li2"><a class="a2">母婴</a> <a class="a2">玩具</a> <a
							class="a2">童装童鞋</a></li>
						<li class="li2"><a class="a2">鞋靴</a> <a class="a2">箱包</a> <a
							class="a2">钟表</a> <a class="a2">珠宝</a></li>
						<li class="li2"><a class="a2">运动户外</a> <a class="a2">足球</a> <a
							class="a2">汽车生活</a></li>
						<li class="li2"><a class="a2">图书</a> <a class="a2">音像</a> <a
							class="a2">电子书</a></li>
					</ul>
				</div>
				<div id="slideshow" width="780px" height="380">
					<div id="leftpre">
						<span id="leftpre-span"> < </span>
					</div>
					<div id="rightnext">
						<span id="rightnext-span"> > </span>
					</div>
				</div>
			</div>
			<div id="commodity" style="position: relative; top: 100px;">
				<h1 class="flooer">家居建材</h1>
				<ul class="ul4">
					<li class="li3"><a> <span class="span2">全套棉麻舒适沙发</span> 
						<img 
							class="img"
							src="appstyle/img/No.1/timg (2).jpg" width="160" height="165"/>
					</a></li>
					<li class="li3"><a> <span class="span2">天鹅绒床上四件套</span>
						<img 
							class="img"
							src="appstyle/img/No.1/timg (3).jpg" width="160" height="165"/>
					</a></li>
					<li class="li3"><a> <span class="span2">温馨双人沙发</span>
						<img 
							class="img"
							src="appstyle/img/No.1/timg (5).jpg" width="160" height="165"/>
					</a></li>
					<li class="li3"><a> <span class="span2">全套红木桌柜</span>
						<img 
							class="img"
							src="appstyle/img/No.1/timg.jpg" width="160" height="165"/>
					</a></li>
					<li class="li3"><a> <span class="span2">优雅木质纹理瓷砖</span>
						<img 
							class="img"
							src="appstyle/img/No.1/u=2231696013,4050402652&fm=11&gp=0.jpg" width="160" height="165"/>
					</a></li>
				</ul>
			</div>
			<div id="commodity" style="position: relative; top: 100px;">
				<h1 class="flooer_2">家用电器</h1>
				<ul class="ul4">
					<li class="li3"><a> <span class="span2">单筒全自动大功率洗衣机</span> <img
							class="img"
							src="appstyle/img/No.2/timg (2).jpg" width="160" height="165">
					</a></li>
					<li class="li3"><a> <span class="span2">美的变频空调</span> <img
							class="img"
							src="appstyle/img/No.2/timg (1).jpg" width="160" height="165"/>
	               	</a></li>
					<li class="li3"><a> <span class="span2">超大功率吸油烟机</span> <img
							class="img"
							src="appstyle/img/No.2/timg (3).jpg" width="160" height="165"/>
						</a></li>
					<li class="li3"><a> <span class="span2">美的多门新时代冰箱</span> <img
							class="img"
							src="appstyle/img/No.2/timg (4).jpg" width="160" height="165"/>
					</a></li>
					<li class="li3"><a> <span class="span2">海尔多功能电饭煲</span> <img
							class="img"
							src="appstyle/img/No.2/timg.jpg" width="160" height="165"/>
					</a></li>
				</ul>
			</div>
			<div id="commodity" style="position: relative; top: 100px;">
				<h1 class="flooer_2">美容化妆</h1>
				<ul class="ul4">
					<li class="li3"><a> <span class="span2">补水精液BB霜</span> <img
							class="img"
							src="appstyle/img/No.3/timg (1).jpg" width="160" height="165"/>
					</a></li>
					<li class="li3"><a> <span class="span2">精品洗发护发套装</span> <img
							class="img"
							src="appstyle/img/No.3/timg (2).jpg" width="160" height="165"/>
					</a></li>
					<li class="li3"><a> <span class="span2">愈颜美颜遮瑕膏</span> <img
							class="img" 
							src="appstyle/img/No.3/timg (3).jpg" width="160" height="165"/>
					</a></li>
					<li class="li3"><a> <span class="span2">全套美肤宝套装</span> <img
							class="img"
							src="appstyle/img/No.3/timg (4).jpg" width="160" height="165"/>
					</a></li>
					<li class="li3"><a> <span class="span2">精品美白护肤霜</span> <img
							class="img"
							src="appstyle/img/No.3/timg.jpg" width="160" height="165"/>					
				    </a></li>
				</ul>
			</div>
			<div id="commodity" style="position: relative; top: 100px;">
				<h1 class="flooer_2">热款衣物</h1>
				<ul class="ul4">
					<li class="li3"><a> <span class="span2">竹炭双层保暖裤</span> <img
							class="img"
							src="appstyle/img/No.4/timg (1).jpg" width="160" height="165"/>
					</a></li>
					<li class="li3"><a> <span class="span2">可爱婴幼儿背带裤</span> <img
							class="img"
							src="appstyle/img/No.4/timg (2).jpg" width="160" height="165"/>
					</a></li>
					<li class="li3"><a> <span class="span2">网红秋季风衣</span> <img
							class="img"
							src="appstyle/img/No.4/timg (3).jpg" width="160" height="165"/>
					</a></li>
					<li class="li3"><a> <span class="span2">兔斯基恶搞短袖</span> <img
							class="img"
							src="appstyle/img/No.4/timg (5).jpg" width="160" height="165"/>					
					</a></li>
					<li class="li3"><a> <span class="span2">情侣温馨情侣装T恤</span> <img
							class="img"
							src="appstyle/img/No.4/timg.jpg" width="160" height="165"/>
					</a></li>
				</ul>
			</div>
			<div id="commodity" style="position: relative; top: 100px;">
				<h1 class="flooer_2">休闲零食</h1>
				<ul class="ul4">
					<li class="li3"><a> <span class="span2">零食大礼包</span> <img
							class="img"
							src="appstyle/img/No.5/timg (1).jpg" width="160" height="165"/>
						</a></li>
					<li class="li3"><a> <span class="span2">美味各式果脯</span> <img
							class="img"
							src="appstyle/img/No.5/timg (2).jpg" width="160" height="165"/>
					</a></li>
					<li class="li3"><a> <span class="span2">美味豆干大礼包</span> <img
							class="img"
							src="appstyle/img/No.5/timg (3).jpg" width="160" height="165"/>
					</a></li>
					<li class="li3"><a> <span class="span2">喜之郎果冻</span> <img
							class="img"
							src="appstyle/img/No.5/timg (4).jpg" width="160" height="165"/>
					</a></li>
					<li class="li3"><a> <span class="span2">美味香辣鸭脖</span> <img
							class="img"
							src="appstyle/img/No.5/timg.jpg" width="160" height="165"/>
					</a></li>
				</ul>
			</div>
		</div>
		<style>
.login {
	background-color: darkgray;
	padding-bottom: 5px;
	padding-top: 3px;
	background-color: #EEEEEE;
}

.login_1 {
	width: 1080px;
	position: relative;
	border: 1px solid #EEEEEE;
	margin: 0 auto;
}
</style>
		<script type="text/javascript">
			var arrImg = new Array("appstyle/img/No.5/timg.jpg", "appstyle/img/No.6/timg1.jpg",
					"appstyle//img/3.jpg", "appstyle//img/4.jpg");
			var indexImg = 0;
			var intervalNext = window.setInterval("imgCutNext()", 3000);
			$(document).ready(function() {
				// 第一次进入 直接显示第一张图片
				$("#slideshow").css("background", "url(" + arrImg[0] + ")");
				$("#leftpre").click(function() {
					imgCutPrev();
				})
				$("#rightnext").click(function() {
					imgCutNext();
				})
			})

			function imgCutNext() {
				indexImg++;
				if (indexImg == 4) {
					indexImg = 0;
				}
				$("#slideshow").css("background",
						"url(" + arrImg[indexImg] + ")");
			}

			function imgCutPrev() {
				indexImg--;
				if (indexImg == -1) {
					indexImg = 3;
				}
				$("#slideshow").css("background",
						"url(" + arrImg[indexImg] + ")");
			}
		</script>
</body>
</html>
